<template>
  <view class="popup-box">
    <uni-popup
      ref="popup"
      type="bottom"
      background-color="#fff"
      customClass="bgF"
      borderRadius="10px 10px 0 0"
    >
      <view class="contetn">
        <view class="top-1">
          <image
            :src="
              $img_base_url(
                info
                  ? getSelectGoods && getSelectGoods.thumbnail
                    ? getSelectGoods.thumbnail
                    : info.image
                  : ''
              )
            "
            mode="aspectFill"
          ></image>
          <view class="text">
            <view class="price" v-if="status == 'group' && groupType == 'alone'">
              ￥
              <text>
                {{ gPrice(getSelectGoods ? getSelectGoods.market_price : "")[0] }}
              </text>
              {{ gPrice(getSelectGoods ? getSelectGoods.market_price : "")[1] }}
            </view>
            <view class="price" v-else>
              ￥
              <text>
                {{ gPrice(getSelectGoods ? getSelectGoods.price : "")[0] }}
              </text>
              {{ gPrice(getSelectGoods ? getSelectGoods.price : "")[1] }}
            </view>
            <view class="spec"> 请选择 {{ goods ? goods.join(",") : "" }} </view>
          </view>
        </view>
        <!-- <view class="spec-1">
					<view class="title">
						规格名称
					</view>
					<view class="s-list">
						<view class="item" :class="item==0 ? 'select' : ''" v-for="item in 5">
							<image :src="$img_path('/mall/n_1.png')" mode="aspectFill"></image>
							<view class="name more-row" :style="{'--row-num':2}">
								名称名称名称名称名称
							</view>
						</view>
					</view>
				</view> -->

        <template v-if="info">
          <view class="spec-1 spec-2" v-for="(item, i) in info.spu" :key="i">
            <view class="title">
              {{ item.name }}
            </view>
            <view class="radio-list" :style="{ opacity: status == 'cart' ? '0.5' : 1 }">
              <view
                class="item"
                :class="goods.includes(item_s.name) ? 'select' : ''"
                @click="selectItemSpec(item_s, i)"
                v-for="(item_s, idx) in item.item"
                :key="idx"
              >
                {{ item_s.name }}
              </view>
            </view>
          </view>
        </template>

        <view class="num-box">
          <view class="text">
            <text>数量</text>
            <!-- （限购10次） -->
            （库存{{ stock }}）
          </view>
          <view class="r-inp">
            <image :src="$img_path('/mall/13.png')" @click="computedNum('jian')" mode="widthFix"></image>
            <input type="number" v-model="number" />
            <image :src="$img_path('/mall/12.png')" @click="computedNum('add')" mode="widthFix"></image>
          </view>
        </view>

        <view class="b-btn">
          <view class="p-box">
            <view class="group-btn" v-if="status == 'cart'">
              <button @click="cartEdit">确定</button>
            </view>
            <view class="group-btn" v-if="status == 'group'">
              <button @click="pay">立即购买</button>
            </view>
            <view class="group-btn" v-if="status == 'addCar'">
              <button @click="addCar">加入购物车</button>
            </view>
            <view class="group-btn" v-if="status == 'pay'">
              <button @click="pay">立即购买</button>
            </view>
            <view class="select-btn" v-if="status == 'select'">
              <button @click="addCar" class="cart">加入购物车</button>
              <button @click="pay" class="pay">立即购买</button>
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  name: "goodsSelect",
  props: {
    goodsInfo: {
      type: Object,
      default: {},
    },
    selectGood: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      status: "group", //group 团购，addCar 加入购物车 ，pay 直接购买 ，选择 select
      info: null,
      goods: null,
      number: 1,
      groupType: "",
    };
  },
  watch: {
    goodsInfo(val) {
      this.info = val;
      this.goods = this.selectGood;
      // console.log(val,'55555')
    },
    selectGood(val) {
      // this.goods = val
      // console.log(val,'55555')
    },
  },
  computed: {
    getSelectGoods() {
      if (this.info && this.info.sku) {
        return this.info.sku.filter((e) => {
          return this.compareArrays(e.difference, this.goods);
        })[0];
      }
    },
    stock() {
      if (this.info && this.info.sku) {
        let arr = this.info.sku.filter((e) => {
          return this.compareArrays(e.difference, this.goods);
        });
        return arr.length > 0 ? arr[0].stock : 0;
      }
    },
  },
  methods: {
    // 选择规格
    selectItemSpec(data, i) {
      console.log(data, i);
      if (this.status == "cart") {
        return;
      }
      // this.number = 1
      if (this.goods) {
        // this.goods[i] = data.name
        this.$set(this.goods, i, data.name);
      } else {
        this.goods = [];
        this.$set(this.goods, i, data.name);
      }
    },

    computedNum(type) {
      let arr = this.info.sku.filter((e) => {
        return this.compareArrays(e.difference, this.goods);
      });
      console.log(arr, "-");
      let stock = arr.length > 0 ? arr[0].stock : 0;
      if (type == "jian" && this.number > 1) {
        this.number--;
      }
      if (type == "add" && this.number < stock) {
        this.number++;
      }
    },

    open(type, number, groupType) {
      this.$refs.popup.open();
      this.status = type;
      this.groupType = groupType;
      console.log(groupType, "==");
      if (number) {
        this.number = number;
      }
    },
    close() {
      this.$refs.popup.close();
    },
    pay() {
      let arr = this.info.sku.filter((e) => {
        return this.compareArrays(e.difference, this.goods);
      });
      this.$emit("submitOrder", {
        sku_id: String(arr[0].id),
        // sum:String(this.number),
        number: String(this.number),
      });
    },
    addCar() {
      let arr = this.info.sku.filter((e) => {
        return this.compareArrays(e.difference, this.goods);
      });
      this.$emit("addCar", {
        sku_id: String(arr[0].id),
        // sum:String(this.number),
        number: String(this.number),
      });
    },
    cartEdit() {
      let arr = this.info.sku.filter((e) => {
        return this.compareArrays(e.difference, this.goods);
      });
      this.$emit("cartEdit", {
        sku_id: String(arr[0].id),
        // sum:String(this.number),
        number: String(this.number),
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.popup-box {
  .contetn {
    padding: 22rpx 22rpx 0;
    max-height: 1120rpx;
    overflow-y: auto;
    .top-1 {
      padding-top: 20rpx;
      display: flex;
      align-items: center;
      & > image {
        width: 160rpx;
        height: 160rpx;
      }
      .text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 20rpx;
        box-sizing: border-box;
        .price {
          font-weight: bold;
          font-size: 28rpx;
          color: #e72a2a;
          line-height: 64rpx;
          text {
            font-size: 48rpx;
          }
        }
        .spec {
          font-weight: bold;
          font-size: 30rpx;
          color: #333333;
          line-height: 42rpx;
          margin-top: 38rpx;
        }
      }
    }
    .spec-1 {
      margin-top: 24rpx;
      width: 100%;
      overflow: hidden;
      .title {
        font-weight: bold;
        font-size: 34rpx;
        color: #333333;
        line-height: 48rpx;
      }
      .s-list {
        display: flex;
        flex-wrap: wrap;
        width: calc(100% + 18rpx);
        padding-top: 4rpx;
        .item {
          width: 224rpx;
          background: #f8f8f8;
          border-radius: 16rpx;
          overflow: hidden;
          margin-top: 16rpx;
          margin-right: 14rpx;
          border: 2rpx solid transparent;
          &.select {
            border: 2rpx solid #e72a2a;
          }
          image {
            width: 224rpx;
            height: 224rpx;
          }
          .name {
            padding: 12rpx;
            box-sizing: border-box;
            font-weight: bold;
            font-size: 32rpx;
            color: #333333;
            line-height: 44rpx;
          }
        }
      }
    }
    .spec-2 {
      margin-top: 40rpx;
      .radio-list {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        .item {
          padding: 16rpx 24rpx 14rpx;
          background: #f8f8f8;
          border-radius: 16rpx;
          box-sizing: border-box;
          font-weight: bold;
          font-size: 30rpx;
          color: #999999;
          line-height: 42rpx;
          margin-right: 20rpx;
          margin-top: 20rpx;
          &.select {
            background-color: #e72a2a;
            color: #ffffff;
          }
        }
      }
    }
    .num-box {
      margin-top: 44rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 56rpx;
      .text {
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;
        line-height: 44rpx;
        text {
          font-weight: bold;
          font-size: 32rpx;
        }
      }
      .r-inp {
        display: flex;
        align-items: center;
        image {
          width: 44.8rpx;
          height: 44.8rpx;
        }
        input {
          width: 68rpx;
          height: 44.8rpx;
          padding: 0 10rpx;
          text-align: center;
        }
      }
    }

    .b-btn {
      width: 100%;
      height: 106rpx;
      .p-box {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        background-color: #ffffff;
        padding: 10rpx 22rpx 0;
        box-sizing: border-box;
        .group-btn {
          width: 100%;
          button {
            width: 100%;
            height: 96rpx;
            background: linear-gradient(135deg, #ffa233 0%, #fb4c4c 100%);
            border-radius: 80rpx;
            font-weight: bold;
            font-size: 36rpx;
            color: #ffffff;
            line-height: 96rpx;
          }
        }

        .select-btn {
          display: flex;
          justify-content: space-between;
          button {
            width: 300rpx;
            height: 96rpx;
            border-radius: 48rpx;
          }
          .cart {
            background: #f8f8f8;
            font-weight: bold;
            font-size: 36rpx;
            color: #999999;
            line-height: 96rpx;
          }
          .pay {
            background: linear-gradient(135deg, #ffa233 0%, #fb4c4c 100%);
            font-weight: bold;
            font-size: 36rpx;
            color: #ffffff;
            line-height: 96rpx;
          }
        }
      }
    }
  }
}
</style>
